//查询的组件
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>筛选搜索</span>
        <el-button
          style="float: right; padding: 3px"
          type="primary"
          @click="$parent.handleSearch"
          >查询</el-button
        >
        <el-button
          style="float: right; padding: 3px;margin-right:5px;"
          type="button"
          @click="$parent.handleReset"
          >重置</el-button
        >
      </div>
      <el-form
        ref="form"
        :model="listQuery"
        label-width="80px"
        class="product-form"
      >
        <el-form-item label="输入搜索">
          <el-input
            v-model="listQuery.name"
            placeholder="商品名称"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品货号">
          <el-input
            v-model="listQuery.product_sn"
            placeholder="商品货号"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-select
            v-model="listQuery.publish_status"
            placeholder="全部"
            class="input-width"
          >
            <el-option
              v-for="item in publishStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 品牌搜索下拉列表 -->
        <el-form-item label="商品品牌">
          <el-select
            v-model="listQuery.brand_id"
            placeholder="全部"
            class="input-width"
          >
            <el-option
              v-for="item in brandOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 分类的级联数据 -->
        <el-form-item label="商品分类">
          <el-cascader
            class="input-width"
            v-model="selectProductCateValue"
            :options="productCateOptions"
          ></el-cascader>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//引入mixin
import productmixin from "../productmixin";
export default {
  name: "productSearch",
  props: ["listQuery", "publishStatusOptions"],
  mixins: [productmixin],
};
</script>

<style>
.product-form {
  display: flex;
  flex-wrap: wrap;
}
.input-width {
  width: 200px;
}
</style>
